<template>
  <div>
    <h1>学生列表&gt;</h1>
    <el-descriptions
      direction="vertical"
      :column="4"
      :size="size"
      border
      v-for="(l, i) in list"
      :key="i"
    >
      <el-descriptions-item label="姓名">{{ l.name }}</el-descriptions-item>
      <el-descriptions-item label="学号">{{ l.account }}</el-descriptions-item>
      <el-descriptions-item label="班级">{{l.classInfo}}</el-descriptions-item>
      <el-descriptions-item label="密码">{{ l.paw }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { ajax } from "@/api";
import { onMounted, reactive, toRefs } from "@vue/runtime-core";

export default {
  setup(props) {
    const state = reactive({
      list: [],
    });

    onMounted(() => {
      ajax
        .findStudent({
          tableName: "students",
        })
        .then((res) => {
          state.list = res.data;
        });
    });

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style></style>
